<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
		<script>
			
			$(function(){
				
				/* ======================模态框的状态事件====================== */
				//1. 在调用 show 方法后触发。
				$('#myModal').on('show.bs.modal', function () {
			      	alert('调用 show 方法后触发...');
				})
			    
			    //2. 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
				$('#myModal').on('shown.bs.modal', function () {
			      	alert('模态框对用户可见时触发...');
				})
				
				//3. 当调用 hide 实例方法时触发
				$('#myModal').on('hide.bs.modal', function () {
			      	alert('模态框关闭时触发...');
				})
				
				//4. 当模态框完全对用户隐藏时触发。
				$('#myModal').on('hidden.bs.modal', function () {
			      	alert('模态框对关闭后时触发...');
				})
				
			});
			
		
		    
		</script>
		
	</head>
	<body>
		<h1>1-模态框</h1>
		<p>模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等</p>
		
		<h2>用法</h2>
		<pre>
		您可以切换模态框（Modal）插件的隐藏内容：
		通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 <b>data-toggle="modal"</b>，同时设置 <strong>data-target="#identifier"</strong> 或 <strong>href="#identifier"</strong> 来指定要切换的特定的模态框（带有 <b>id="identifier"</b>）。 
		通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 <b>id="identifier"</b> 的模态框： 
		<b>$('#identifier').modal(options)</b>
		</pre>
		
		<script type="text/javascript">
			$(function(){
				/* ====================几个按钮点击事件====================== */
				//options按钮点击事件
				$("#options").click(function(){
					//1.网页打开之后就显示模态框
				    $('#myModal').modal({
				       keyboard: true
				    });
				});
				
				//Toggle按钮点击事件
				$("#toggle").click(function(){
					$('#myModal').modal('toggle');
				});
				
				//Show按钮点击事件
				$("#show").click(function(){
					$("#myModal").modal('show');
				});
				
				//Hide按钮点击事件
				$("#hide").clicl(function(){
					$("#myModal").modal('hide');
				});
			});
			
		</script>		
		
		<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
		   开始演示模态框
		</button>
		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<!-- 关闭按钮 -->
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;
		            	</button>
						<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
		            	<div class="modal-body">按下 ESC 按钮退出</div>
					</div>
					<!-- 正文内容 -->
					<div class="modal-body">
						在这里添加一些文本
					</div>
					<!-- 注解的两个按钮 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">提交更改</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>

		<h3>测试几个方法</h3>
		<button class="btn" id="options">Options</button>
		<button class="btn" id="toggle">Toggle</button>
		<button class="btn" id="show">Show</button>
		<button class="btn" id="hide">Hide</button>
		
	</body>
</html>
